<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0, 0, 0, .4);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda consequatur dolor enim, est eveniet,
        exercitationem id, impedit ipsam iste labore maxime nisi omnis quae quo repellat rerum totam ut.
    </div>
    <div>A alias animi architecto cum delectus deserunt doloribus facere iste iure libero, neque quam quas quasi quidem
        repellat reprehenderit sint suscipit ut veritatis vitae? At cum harum nobis possimus sed!
    </div>
    <div>Cumque cupiditate dolore, eius eligendi ex excepturi fuga labore laborum laudantium magni possimus quia
        quibusdam, quidem temporibus totam voluptates voluptatum! Earum enim ipsam labore magnam nemo praesentium quasi
        quidem sunt.
    </div>
    <div>Accusamus aperiam culpa deleniti, distinctio eius excepturi in nisi provident suscipit! Adipisci blanditiis ea
        esse excepturi facilis ipsa, ipsum itaque magnam magni maxime, odit officiis perspiciatis reiciendis rerum
        tenetur,
        veniam!
    </div>
    <div>Animi corporis cum dolorum error eum, eveniet natus quisquam. Commodi deleniti, dicta eius eveniet expedita,
        facilis necessitatibus omnis possimus quaerat quam quia quidem quisquam ratione sequi similique vel voluptatem,
        voluptates?
    </div>
    <div>Accusantium amet aspernatur consequuntur culpa distinctio eaque earum esse eveniet illum, ipsum, iste iure
        necessitatibus non placeat recusandae sed sit ullam, vel. Alias consequuntur est in labore laboriosam non
        nostrum!
    </div>
    <div>Asperiores, cupiditate dolores eaque ex explicabo facere, in molestias nam obcaecati praesentium quasi ratione
        reprehenderit sint soluta ut vel, velit voluptatibus. Dolorem inventore officiis perspiciatis placeat. At dicta
        laborum porro.
    </div>
    <div>Consequuntur debitis dolor hic ipsa, maxime molestiae nesciunt nostrum, quam quod rem suscipit vero voluptate
        voluptatem. Aliquam aliquid architecto cum deserunt dolorem exercitationem impedit molestias natus, quisquam
        quod
        totam voluptatem.
    </div>
    <div>Ducimus earum est eveniet expedita iure laudantium, nulla numquam quam quibusdam sequi. Animi eaque eos
        expedita
        impedit natus quas reprehenderit similique, velit vero voluptate! Aliquam aspernatur in magni quo repudiandae.
    </div>
    <div>Amet at autem ex laudantium porro totam voluptas voluptatem. A eligendi maiores perferendis quisquam quos,
        reiciendis voluptas! Consequatur error esse provident quia rerum sed vero. Culpa ea eligendi quo soluta.
    </div>
    <div>Aperiam expedita ipsum perferendis qui quia. Ab, adipisci consectetur consequatur debitis eaque est illo, nam
        nesciunt quis rem similique suscipit tempore tenetur ullam voluptatem! Amet dolor et magnam quod voluptates?
    </div>
    <div>Alias architecto commodi consequatur dicta eius error et excepturi illo, ipsum minus molestias nihil numquam
        pariatur placeat quas quos reiciendis rem repudiandae sequi temporibus tenetur ullam unde velit vero
        voluptatibus.
    </div>
    <div>Accusantium amet consequatur deleniti distinctio dolor doloribus earum et exercitationem facere ipsum iure
        minima
        molestiae nemo neque nisi, nobis nulla pariatur placeat praesentium quasi quia quidem quos reiciendis
        reprehenderit
        veritatis?
    </div>
    <div>Culpa debitis dolores laborum nesciunt, obcaecati qui quod. Expedita fugit pariatur sequi! Aliquam blanditiis,
        commodi consequatur dolore ea et mollitia non omnis optio provident qui temporibus vel, voluptas. Dignissimos,
        incidunt.
    </div>
    <div>Ad alias aperiam commodi consequatur corporis dignissimos doloribus eaque earum enim fuga hic inventore ipsa,
        laboriosam laborum laudantium, magni, maiores maxime officia quasi qui quibusdam reiciendis rem similique totam
        voluptatum.
    </div>
    <div>A accusantium consequatur cupiditate deserunt dolore earum harum inventore laborum, laudantium maiores maxime
        modi nemo nobis qui quis temporibus, unde. Cumque facere iure magnam molestias natus non obcaecati sunt
        temporibus!
    </div>
    <div>Amet, dolorum eum eveniet id maiores molestiae natus nisi numquam, perferendis, recusandae saepe similique
        tempore ut. Animi asperiores blanditiis ea error, laboriosam maxime numquam odio reprehenderit sint, vel
        voluptas
        voluptatem.
    </div>
    <div>A alias aliquam atque autem distinctio ducimus explicabo fugiat illum impedit in inventore itaque molestias
        nam,
        nihil non nulla odio odit possimus quasi quo recusandae sed sunt tempore totam veniam.
    </div>
    <div>Debitis dolorum impedit libero natus nobis repellendus reprehenderit soluta tempore ullam vitae. Ad delectus
        enim
        nisi tenetur. Cupiditate eum ipsa iste magnam magni non, obcaecati pariatur recusandae temporibus ut veniam.
    </div>
    <div>Assumenda eaque eos illum maiores nihil nobis non praesentium quis sunt tempore? Adipisci commodi consequatur
        cum, deserunt eaque eius est harum inventore molestiae mollitia neque perferendis ratione vero voluptate
        voluptatibus!
    </div>
    <div>Alias blanditiis corporis distinctio doloribus ducimus fugit hic illo illum, inventore ipsam libero mollitia
        nihil nisi nostrum omnis, quaerat qui quisquam sed ut voluptatem? Accusantium cumque dolorem necessitatibus non
        obcaecati!
    </div>
    <div>Atque consequatur magnam quisquam recusandae repellat totam vitae voluptates? Adipisci aperiam architecto
        cupiditate distinctio, dolor facere illum itaque nisi, quasi quisquam ratione sunt voluptatem voluptatum. Ab est
        fugiat nostrum odit?
    </div>
    <div>Ducimus esse eveniet odio quia ratione unde vel! Ad alias animi aspernatur blanditiis eaque, enim excepturi,
        exercitationem iure minima minus molestiae mollitia non optio quaerat repellendus repudiandae rerum sequi sint?
    </div>
    <div>Aliquam autem corporis cupiditate neque numquam, quam repellat similique ullam. Exercitationem maiores minus
        modi
        nihil sunt ullam veritatis voluptate voluptatem. Animi cupiditate dolor doloribus est quidem? Cum harum officiis
        quos.
    </div>
    <div>Ab aut consequatur doloremque ea, enim eos et expedita explicabo fugit harum hic id ipsum itaque libero maxime
        minima nobis nostrum officiis porro quis rerum sint sunt suscipit totam voluptatem.
    </div>
    <div>Ab aspernatur, consectetur dignissimos eum facere pariatur quibusdam quos reiciendis repellendus rerum ut
        vitae?
        Asperiores blanditiis, cupiditate debitis, distinctio dolor dolorem incidunt magni, odit praesentium quasi
        quibusdam
        sed velit veniam?
    </div>
    <div>Animi asperiores dignissimos necessitatibus perspiciatis praesentium quos, ullam ut. Accusantium aperiam
        consectetur cumque explicabo, ipsum magnam magni natus numquam porro, quidem repellat repudiandae tenetur unde,
        voluptas voluptate voluptates voluptatibus voluptatum.
    </div>
    <div>Ipsum laborum nesciunt quidem suscipit. Architecto asperiores earum expedita explicabo facere, impedit modi,
        mollitia numquam omnis provident quo veritatis? Ab aut cum exercitationem ipsum, nisi quisquam quod rem tenetur
        voluptatibus?
    </div>
    <div>Asperiores doloribus harum magni molestias pariatur quasi voluptatem? Aliquid asperiores aspernatur cum
        deleniti
        doloremque ex expedita, fuga harum hic ipsam, ipsum iste laudantium molestias quos rem repudiandae sint unde
        veritatis?
    </div>
    <div>Ad aliquam animi aperiam culpa debitis delectus dolorum eius eligendi esse, fuga fugiat ipsam ipsum iste modi
        numquam odio placeat provident quae quam quas quia, repellendus reprehenderit rerum sequi sint.
    </div>
    <div>Amet at, dicta error esse eum ex facere inventore itaque iure magni mollitia obcaecati optio sed sequi
        similique
        sunt, ut vitae? Ipsa iure optio possimus quo reiciendis rem soluta voluptas.
    </div>
    <div>Architecto at atque culpa deleniti deserunt dolor dolore doloribus eligendi error hic ipsa iure magnam numquam
        odio officiis omnis pariatur placeat quas quia quibusdam quidem reprehenderit totam vel, veritatis vero.
    </div>
    <div>Accusamus architecto enim exercitationem ipsam porro! Aperiam id nisi quasi! Ad aspernatur consequatur
        corporis,
        distinctio, dolore eaque, enim id impedit minima molestiae nemo non ratione repudiandae sit vero voluptatibus
        voluptatum!
    </div>
    <div>Alias amet dignissimos maxime nam placeat qui tempore ullam. Cum dignissimos, dolores esse explicabo incidunt
        molestias nam odio? Consequatur illo in officia quia saepe? Autem debitis laboriosam nulla recusandae voluptate!
    </div>
    <div>Dolores, doloribus impedit inventore maxime minus nam odit similique sint voluptatum. At aut earum id iure
        laborum minima pariatur sit temporibus ullam? Atque fugit inventore laudantium molestias perferendis porro,
        reprehenderit?
    </div>
    <div>Alias architecto autem corporis dolor enim explicabo, illo ipsum laboriosam magnam molestias nesciunt pariatur
        ratione reiciendis repellat repellendus reprehenderit sunt! Assumenda dignissimos dolor est ex mollitia officia
        quam
        quas ullam!
    </div>
    <div>Deleniti eum fugiat hic maiores odit sed voluptate? A dolores facere fugiat hic ipsam, magnam maiores natus
        nemo
        pariatur, quo, repellat repellendus saepe soluta tempora unde. Aperiam architecto culpa vero!
    </div>
    <div>Ab, atque aut beatae eos eum ex excepturi fuga iusto minima, numquam perspiciatis provident similique sint
        temporibus velit voluptatibus voluptatum? Consequuntur, et fugiat neque nesciunt nulla officiis repellat rerum
        ullam.
    </div>
    <div>Commodi, cum dolorem eaque enim harum in magni qui quo suscipit! Accusamus atque aut beatae consequatur
        delectus
        dicta earum eum hic ipsam laborum magnam nihil pariatur, recusandae repudiandae vel, veniam!
    </div>
    <div>Aliquid distinctio illo inventore laudantium nobis? Aperiam blanditiis officia qui. Atque aut cumque earum fuga
        hic id placeat unde? Adipisci culpa magni quidem! Accusamus consequuntur iusto omnis ratione sequi, temporibus.
    </div>
    <div>At aut beatae consectetur consequatur deleniti dolorem dolorum eligendi exercitationem facilis hic incidunt
        ipsum
        iusto libero modi nulla obcaecati perferendis quam qui quia saepe, sint tenetur totam ullam veniam voluptate!
    </div>
    <div>Asperiores, atque dolores error expedita maiores mollitia nisi nulla tenetur vel! Aperiam distinctio dolore
        eligendi esse illum, natus numquam officiis, quis sapiente tempora ut voluptatem? In incidunt soluta ullam unde?
    </div>
    <div>Earum, quibusdam, sequi. Alias, at culpa cumque cupiditate debitis distinctio eaque error et iure iusto laborum
        nesciunt nihil nulla odit quas quos recusandae sequi tempore ullam vitae! Alias, aperiam, voluptas.
    </div>
    <div>Aliquid cumque doloremque ea, eaque earum facere numquam obcaecati quam, quis quo repellat repellendus
        similique
        ullam velit voluptatem! Asperiores consectetur consequuntur eum incidunt magnam nisi quibusdam totam voluptate,
        voluptates voluptatibus?
    </div>
    <div>Aut, quae, sit! Amet aperiam at culpa dignissimos facere fuga illo, ipsa, iste libero maiores, numquam
        obcaecati
        quia repellat repudiandae sit veniam vitae? Aliquam esse labore libero maiores nemo odit.
    </div>
    <div>Ad, aperiam cum doloremque dolorum est inventore iusto laboriosam minus nemo porro provident quae quibusdam
        quis
        quos reprehenderit, repudiandae sequi voluptates, voluptatum. Id inventore maxime modi nulla quod reiciendis
        voluptates!
    </div>
    <div>Adipisci asperiores deleniti ducimus est ipsam natus quibusdam quo, repellendus voluptates. A adipisci animi
        dicta, doloremque sequi sunt! Aliquam aut cupiditate pariatur rem sunt ullam? Aspernatur cum minima omnis qui.
    </div>
    <div>Ad ea ex excepturi fuga illum iure perspiciatis provident quaerat temporibus! Assumenda mollitia nemo numquam
        pariatur? Adipisci amet cum deleniti enim, id in laborum quidem soluta sunt unde vero vitae.
    </div>
    <div>Laudantium, necessitatibus, quos. Aperiam beatae blanditiis commodi deserunt eius est itaque, laudantium nobis
        quae similique, temporibus voluptate! Consequuntur cum delectus facere, iure laudantium molestiae neque quae
        quod
        ratione rem ullam?
    </div>
    <div>Ad aliquam blanditiis debitis eos est excepturi explicabo in iure laborum laudantium libero molestias nemo
        neque
        officiis, quae quaerat qui quis, ratione reiciendis, rem saepe soluta tempora vel velit veniam.
    </div>
    <div>Aliquid, deserunt doloremque, dolores ducimus explicabo, facilis fugit incidunt inventore libero molestiae
        molestias mollitia nobis placeat quia sint soluta voluptates? Aliquid at cum eos exercitationem fugit hic illum
        odio, similique?
    </div>
    <div>Odit provident, suscipit! Ab amet aspernatur at atque distinctio doloremque esse et eum ex fugiat harum iste
        itaque laudantium provident quibusdam quo quod reiciendis repellat repudiandae sed unde, voluptatem voluptatum?
    </div>
    <div>Adipisci et molestiae quas quod rem sequi veniam! Ab architecto dignissimos dolore ex expedita explicabo,
        laborum
        modi nisi quam saepe sunt voluptates. Culpa, ipsa itaque perferendis placeat quo sint sit.
    </div>
    <div>Alias architecto autem dignissimos dolorem earum eligendi, eum iure labore maxime nam pariatur qui quos rem
        repellendus, sit tempora temporibus tenetur vel vero voluptas? Beatae cum molestiae perferendis reiciendis vel?
    </div>
    <div>Aperiam assumenda atque consequatur consequuntur corporis cum cumque dicta ducimus error eveniet exercitationem
        hic incidunt ipsam, laborum laudantium nisi nulla odio porro quam quia quos, sunt totam ullam velit voluptatum.
    </div>
    <div>A aliquam consectetur consequuntur corporis deleniti dolores, eius excepturi fugit harum illum in laborum
        magnam
        officia omnis, optio porro ratione sapiente! Atque cumque earum, illum ipsa quod ut voluptas! Adipisci.
    </div>
    <div>Ducimus libero porro quia quo voluptatem! Aspernatur aut consequatur cum, deserunt eaque, eius expedita
        laboriosam magnam molestiae necessitatibus, pariatur repellendus reprehenderit temporibus! Atque debitis, est
        impedit laudantium molestias non recusandae.
    </div>
    <div>Atque cumque delectus earum facere inventore mollitia non possimus praesentium quas qui? Commodi cum distinctio
        eius eligendi exercitationem facilis harum id modi nihil nisi, non perferendis sunt, tenetur unde, voluptas?
    </div>
    <div>Ab aspernatur delectus doloribus dolorum harum numquam omnis tenetur totam voluptate. Blanditiis cupiditate
        doloribus ea eos explicabo, molestiae necessitatibus, non nostrum officia provident quasi qui quod reiciendis
        unde,
        voluptate? Magni!
    </div>
    <div>A, ab animi aperiam at dicta ducimus enim facere impedit inventore labore, maxime modi molestias neque nisi non
        quas quis quod ratione recusandae sequi tempora vel voluptatum. Alias, eveniet velit.
    </div>
</div>
</body>
</html>